<template>
	<div>
		<div class="mine_header">
			<i class="iconfont icon-bianji"></i>
			<i class="iconfont icon-xinxi"></i>
			<div class="member_img">
				<!-- <img v-show = "img!=null" :src="img"/> -->
				<img src="../../static/img/mine_img.png">
			</div>
			<p class="mine_p1" ><span @click="loginClick()">登录</span> / <span @click="registerClick()">注册</span></p>
			<p class="mine_p1" ></p>
			<p class="mine_p2"><span>乐豆&nbsp;&nbsp; <b>0.00</b></span>&nbsp;&nbsp; | &nbsp;&nbsp; <span>余额&nbsp; <b>0.00</b></span></p>
		</div>
		<div class="mine_order">
			<h3>我的订单</h3>
			<ul>
				<li>
					<img src="../../static/img/mine-1.png"/>
					<br />
					<span>
						全部
					</span>
				</li>
				<li>
					<img src="../../static/img/mine-2.png"/>
					<br />
					<span>
						待付款
					</span>
				</li>
				<li>
					<img src="../../static/img/mine-3.png"/>
					<br />
					<span>
						待评价
					</span>
				</li>
				<li>
					<img src="../../static/img/mine-4.png"/>
					<br />
					<span>
						售后
					</span>
				</li>
			</ul>
		</div>
		<div class="mine_list">
				<img src="../../static/img/mine-5.png" class="list_logo"/>
				<span>我的钱包</span>
				<i class="iconfont icon-combinedshapefuben right" ></i>
		</div>
		<div class="mine_list">
				<img src="../../static/img/mine-11.png" class="list_logo"/>
				<span>我的二维码</span>
				<i class="iconfont icon-combinedshapefuben right" ></i>
		</div>
		<div class="mine_list">
				<img src="../../static/img/mine-6.png" class="list_logo"/>
				<span>我的团</span>
				<i class="iconfont icon-combinedshapefuben right" ></i>
		</div>
		<div class="mine_list">
				<img src="../../static/img/mine-7.png" class="list_logo"/>
				<span>我的收藏</span>
				<i class="iconfont icon-combinedshapefuben right" ></i>
		</div>
		<div class="mine_list">
				<img src="../../static/img/mine-8.png" class="list_logo"/>
				<span>我的足迹</span>
				<i class="iconfont icon-combinedshapefuben right" ></i>
		</div>
		<div class="mine_list">
				<img src="../../static/img/mine-9.png" class="list_logo"/>
				<span>我的评论</span>
				<i class="iconfont icon-combinedshapefuben right" ></i>
		</div>
		<a href="tel:4008061780" style="display: block;">
		<div class="mine_list" >			
				<img src="../../static/img/mine-10.png" class="list_logo"/>				
				<span>服务热线</span>				
				<i class="iconfont icon-combinedshapefuben right" ></i>		
		</div> 
		</a>  
	</div>		
</template>

<script>
	export default{
		name:'Mine',
		data(){
			return {
				
			}
		},
		created() {
			this.$axios.get('Member/userinfo?user_Id=31&token=322f09ca988c64cd41e57955bfe67620')
			.then(res=>{
				console.log(res)
			}).catch(err=>console.log(err))
			
		},
		methods:{
			loginClick(){
				this.$router.push({
					path: '/login'
				})
			},
			registerClick(){
				
			}
		},
		activated(){
		
		}
	}
</script>

<style scoped="scoped" lang="less">
	.wh(@w, @h) {
		    width: @w;
		    height: @h;
		}
	.mine_header {
	    .wh(100%, 4.5rem);
	    border-bottom: 0.2rem solid #F6F6F6;
	    background: url('../../static/img/mine_bg.png') no-repeat;
	    background-size: 100% auto;
	    text-align: center;
	    position: relative;
	    overflow: hidden;
	    top: 0;
	    left: 0;
	    color: #fff;
	    .member_img {
	        .wh(1.65rem, 1.65rem);
	        border-radius: 50%;
	        margin: 1.1rem auto 0;
	        img {
	            .wh(1.2rem, 1.2rem);
	            border-radius: 50%;
	            border: 0.05rem solid #fff;
	        }
	    }
	    .icon-bianji {
	        font-size: 0.5rem;
	        position: absolute;
	        left: 0.4rem;
	        top: 0.25rem;
	    }
	    .icon-xinxi {
	        font-size: 0.54rem;
	        position: absolute;
	        right: 0.4rem;
	        top: 0.25rem;
	    }
	    .mine_p1 {
	        padding-top: 0.1rem;
	    }
	    .mine_p2 {
	        padding-top: 0.2rem;
	        font-size: 0.32rem;
	        b {
	            font-size: 0.32rem;
	        }
	    }
	}
	.mine_order {
	    .wh(100%, 2.25rem);
	    border-bottom: 0.2rem solid #F6F6F6;
	    overflow: hidden;
	    h3 {
	        font-size: 0.32rem;
	        padding-left: 0.3rem;
	        .wh(100%, 0.8rem);
	        line-height:0.8rem;
	        border-bottom: 0.01rem solid #F6F6F6;
	    }
	    ul {
			.wh(100%,1.4rem);
	        li {
	            float: left;
	            .wh(25%, 1.4rem);
	            text-align: center;
	            font-size: 0.32rem;
	            img {
	                margin-top: 0.2rem;
	                margin-left: 0.06rem;
	                .wh(0.65rem, 0.6rem);
	            }
	        }
	    }
	}
	.mine_list {
	    .wh(100%, 1.1rem);
	    border-bottom: 0.2rem solid #F6F6F6;
	    line-height: 1.1rem;
	    .list_logo {
	        float: left;
	        .wh(0.6rem, auto);
	        margin-top: 0.25rem;
	        margin-left: 0.23rem;
	    }
	    span {
	        font-size: 0.32rem;
	        font-weight: bolder;
	        color: #282828;
	        margin-left: 0.12rem;
	    }
	    .right {
	        color: #282828;
	        float: right;
	        .wh(0.21rem, auto);
	        margin-right: 0.2rem;
	    }
	}
</style>
